<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-row :gutter="24">
        <el-divider content-position="left">
          <legend class="divider-line">订单基本信息</legend>
        </el-divider>
        <el-col :span="24">
          <el-form-item label="子订单号：">
            <div class="yxkj-word-black">{{ orders.orderSn }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="父订单号：">
            <div class="yxkj-word-black">{{ orders.orderPsn }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="订单类型：">
            <div class="yxkj-word-black">
              {{ codeBox.ORDER_TYPE[orders.orderType] }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="订单状态：">
            <div class="yxkj-word-black">
              {{ codeBox.ORDERS_ORDER_STATE[orders.orderState] }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="下单时间：">
            <div class="yxkj-word-black">{{ orders.createTime }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="完成时间：">
            <div class="yxkj-word-black">{{ orders.finishTime }}</div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-divider content-position="left">
          <legend class="divider-line">订单金额信息</legend>
        </el-divider>
        <el-col :span="8">
          <el-form-item label="付款状态：">
            <div class="yxkj-word-black">
              {{ codeBox.ORDER_PAYMENT_STATUS[orders.paymentStatus] }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支付方式：">
            <div class="yxkj-word-black">{{ orders.paymentName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单总金额：">
            <div class="yxkj-word-black">{{ orders.moneyOrder }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品金额：">
            <div class="yxkj-word-black">{{ orders.moneyProduct }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物流费用：">
            <div class="yxkj-word-black">{{ orders.moneyLogistics }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="优惠总额：">
            <div class="yxkj-word-black">{{ orders.moneyDiscount }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="余额支付金额：">
            <div class="yxkj-word-black">{{ orders.moneyPaidBalance }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现金支付金额：">
            <div class="yxkj-word-black">{{ orders.moneyPaidReality }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="优惠券金额：">
            <div class="yxkj-word-black">{{ orders.moneyCoupon }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单满减金额：">
            <div class="yxkj-word-black">{{ orders.moneyActFull }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="积分换算金额：">
            <div class="yxkj-word-black">{{ orders.moneyIntegral }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="退款的金额：">
            <div class="yxkj-word-black">{{ orders.moneyBack }}</div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-divider content-position="left">
          <legend class="divider-line">订单发票信息</legend>
        </el-divider>
        <el-col :span="24">
          <el-form-item label="发票状态：">
            <div class="yxkj-word-black">
              {{ codeBox.ORDER_INVOICE_STATUS[orders.invoiceStatus] }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="发票抬头：">
            <div class="yxkj-word-black">{{ orders.invoiceTitle }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="纳税人识别号：">
            <div class="yxkj-word-black">{{ orders.taxNum }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="发票内容：">
            <div class="yxkj-word-black">{{ orders.invoiceType }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="注册地址：">
            <div class="yxkj-word-black">{{ orders.invoiceAddress }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="注册电话：">
            <div class="yxkj-word-black">{{ orders.invoicePhone }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="开户行：">
            <div class="yxkj-word-black">{{ orders.invoiceBank }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="银行账号：">
            <div class="yxkj-word-black">{{ orders.invoiceCode }}</div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-divider content-position="left">
          <legend class="divider-line">订单收货人信息</legend>
        </el-divider>
        <el-col :span="24">
          <el-form-item label="收货人姓名：">
            <div class="yxkj-word-black">{{ orders.name }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="收货人邮编：">
            <div class="yxkj-word-black">{{ orders.zipCode }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="收货人手机：">
            <div class="yxkj-word-black">{{ orders.mobile }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="收货人邮箱：">
            <div class="yxkj-word-black">{{ orders.email }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="收货人地址：">
            <div class="yxkj-word-black">
              {{ orders.addressAll }} {{ orders.addressInfo }}
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-divider content-position="left">
          <legend class="divider-line">订单发货信息</legend>
        </el-divider>
        <el-col :span="24">
          <el-form-item label="物流公司：">
            <div class="yxkj-word-black">{{ orders.logisticsName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="快递单号：">
            <div class="yxkj-word-black">{{ orders.logisticsNumber }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="发货时间：">
            <div class="yxkj-word-black">{{ orders.deliverTime }}</div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24" style="margin-bottom: 60px">
        <el-col :span="24">
          <el-divider content-position="left">
            <legend class="divider-line">网单基本信息</legend>
          </el-divider>
          <el-table :data="ordersProducts" border style="width: 100%">
            <el-table-column
              prop="productName"
              label="货品名称"
              width="500"></el-table-column>
            <el-table-column prop="specInfo" label="规格"></el-table-column>
            <el-table-column
              prop="productSku"
              label="商品SKU"></el-table-column>
            <el-table-column
              prop="moneyPrice"
              label="商品单价"></el-table-column>
            <el-table-column prop="number" label="商品数量"></el-table-column>
            <el-table-column
              prop="moneyAmount"
              label="网单金额"></el-table-column>
            <el-table-column
              prop="moneyActSingle"
              label="立减优惠金额"></el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <div class="fixed-bottom-20">
          <el-button type="success" @click="back">返回</el-button>
        </div>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { detailsOrders } from "@/api/order";
import { getCodeManager } from "@/api/all";
export default {
  name: "ordersdetails",
  data() {
    return {
      orders: {},
      ordersProducts: [],
    };
  },
  created() {
    let id = this.$route.query.id;
    detailsOrders({ id: id }).then((res) => {
      this.orders = res.data.data.orders;
      this.ordersProducts = res.data.data.ordersProducts;
    });
    // 是否推荐
    getCodeManager(
      "ORDER_TYPE,ORDERS_ORDER_STATE,ORDER_PAYMENT_STATUS,ORDER_INVOICE_STATUS,ORDER_INVOICE_STATUS",
      () => {}
    );
  },
  methods: {
    back() {
      history.back();
    },
  },
};
</script>
<style scoped>
.divider-line {
  font-size: 20px;
  font-weight: 300;
}
.el-form-item {
  margin-bottom: 5px;
}
.picture-list {
  display: flex;
}
.picture-list li {
  list-style: none;
  margin-right: 10px;
}
</style>
